<template>
    <div class="app-container">
        <div class="todolist">
            <div class="todo-title">推荐邀新统计概述</div>
            <div class="todolist-content">
                <el-row>
                    <el-col :span="8">
                        <div class="tip-num">{{info.todayCount||0}}</div>
                        <div class="tip-title">今日成功推荐次数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.weekCount||0}}</div>
                        <div class="tip-title">本周累计成功推荐次数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.monthCount||0}}</div>
                        <div class="tip-title">本月累计成功推荐次数</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div class="tip-num">{{info.todayPointsNum||0}}</div>
                        <div class="tip-title">今日奖励积分总数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.weekPointsNum||0}}</div>
                        <div class="tip-title">本周累计奖励积分总数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.monthPointsNum||0}}</div>
                        <div class="tip-title">本月累计奖励积分总数</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div class="tip-num">{{info.todayEticketsNum||0}}</div>
                        <div class="tip-title">今日奖励电子券总数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.weekEticketsNum||0}}</div>
                        <div class="tip-title">本周累计奖励电子券总数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.monthEticketsNum||0}}</div>
                        <div class="tip-title">本月累计奖励电子券总数</div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="todolist">
            <div class="todo-title">推荐邀新累计统计</div>
            <div class="flex">
                <div class="flex-con">
                    <el-select v-model="selectedDays" @change="handleSelectedDaysChange">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.title"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <div>
                        <div class="c-static">
                            <div class="flex">
                                <div class="flex-con">
                                    <div class="tip-num">{{info.recommendCount||0}}</div>
                                    <div class="tip-title">累计推荐次数</div>
                                </div>
                                <div class="flex-con" style="padding-left:30px">
                                    <div class="tip-num">{{info.recommendPoints||0}}</div>
                                    <div class="tip-title">累计奖励积分总数</div>
                                </div>
                                <div class="flex-con" style="padding-left:30px">
                                    <div class="tip-num">{{info.recommendEtickets||0}}</div>
                                    <div class="tip-title">累计奖励电子券总数</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-area" v-perm="'recommend_share:static-recommend-export'">
                    <el-button
                        type="primary"
                        @click="handleExportDetails"
                        size="mini"
                    >导出明细</el-button>
                    <div class="static-tip-txt">(备注:明细中为每一天对应的统计)</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as moment from 'moment'
export default {
  data () {
    return {
      info: {
        todayCount: 0,
        weekCount: 0,
        monthCount: 0,
        todayPointsNum: 0,
        downloadLoading: false,
        recommendCount: 0,
        weekPointsNum: 0,
        monthPointsNum: 0,
        todayEticketsNum: 0,
        weekEticketsNum: 0,
        monthEticketsNum: 0,
        recommendPoints: 0,
        recommendEtickets: 0
      },
      selectedDays: 30,
      options: [
        {
          title: '最近7天',
          value: 7
        },
        {
          title: '最近30天',
          value: 30
        },
        {
          title: '最近60天',
          value: 60
        },
        {
          title: '最近90天',
          value: 90
        }
      ]
    }
  },
  created () {
    const momentNow = moment()
    const todayDates = [momentNow.format('YYYY-MM-DD 00:00:00'), momentNow.format('YYYY-MM-DD 23:59:59')]
    this.queryRecommendCount(...todayDates).then(data => {
      this.info.todayCount = data
    })
    const day = new Date().getDay()
    const weekDates = [momentNow.subtract(day > 0 ? day - 1 : 6, 'days').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
    this.queryRecommendCount(...weekDates).then(data => {
      this.info.weekCount = data
    })
    const monthDates = [moment().format('YYYY-MM-01 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
    this.queryRecommendCount(...monthDates).then(data => {
      this.info.monthCount = data
    })
    this.queryPointSum(...todayDates).then(data => {
      this.info.todayPointsNum = data
    })
    this.queryPointSum(...weekDates).then(data => {
      this.info.weekPointsNum = data
    })
    this.queryPointSum(...monthDates).then(data => {
      this.info.monthPointsNum = data
    })

    this.queryEticketsSum(...todayDates).then(data => {
      this.info.todayEticketsNum = data
    })
    this.queryEticketsSum(...weekDates).then(data => {
      this.info.weekEticketsNum = data
    })
    this.queryEticketsSum(...monthDates).then(data => {
      this.info.monthEticketsNum = data
    })
    this.handleSelectedDaysChange()
  },
  methods: {
    handleExportDetails () {
      this.downloadLoading = true
      const dates = [moment().subtract(this.selectedDays, 'days').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      this.$post('/admin/recommend_user_log/daily-count-of-date', {
        startTime: dates[0], endTime: dates[1]
      }).then(data => {
        return this.$get('/admin/user_share_award/daily-sum', { startTime: dates[0],
          endTime: dates[1]}).then(dailyData => {
          if (data && data.length) {
            if (!dailyData || !dailyData.length) {
              return data.map(el => {
                return {
                  date: el.recommendDate,
                  recommendCount: el.recommendCount,
                  awardPointsSum: 0,
                  awardEticketsSum: 0
                }
              })
            } else {
              const tmpMap = {}
              data.forEach(el => {
                tmpMap[el.recommendDate] = {
                  date: el.recommendDate,
                  recommendCount: el.recommendCount,
                  awardPointsSum: 0,
                  awardEticketsSum: 0
                }
              })
              dailyData.forEach(el => {
                tmpMap[el.awardDate] = tmpMap[el.awardDate] || {}
                tmpMap[el.awardDate] = {
                  date: el.awardDate,
                  recommendCount: el.recommendCount || 0,
                  awardPointsSum: el.awardPointsSum,
                  awardEticketsSum: el.awardEticketsSum
                }
              })
              return Object.values(tmpMap)
            }
          } else if (dailyData && dailyData.length) {
            return dailyData.map(el => {
              return {
                date: el.awardDate,
                recommendCount: 0,
                awardPointsSum: el.awardPointsSum,
                awardEticketsSum: el.awardEticketsSum
              }
            })
          }
          return []
        })
      }).then(rows => {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['日期', '累计推荐次数', '累计奖励积分总数', '累计奖励电子券总数']
            const filterVal = ['date', 'recommendCount', 'awardPointsSum', 'awardEticketsSum']
            const data = this.formatJson(filterVal, rows || [])
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '推荐邀新每日统计'
            })
            this.downloadLoading = false
          })
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    handleSelectedDaysChange () {
      const dates = [moment().subtract(this.selectedDays, 'days').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      this.queryAllRecommendCount(...dates).then(data => {
        this.info.recommendCount = data
      })
      this.queryPointSum(...dates).then(data => {
        this.info.recommendPoints = data
      })
      this.queryEticketsSum(...dates).then(data => {
        this.info.recommendEtickets = data
      })
    },
    queryPointSum (startTime, endTime) {
      return this.$get('/admin/user_share_award/points-sum', {
        startTime, endTime
      })
    },
    queryEticketsSum (startTime, endTime) {
      return this.$get('/admin/user_share_award/etickets-sum', {
        startTime, endTime
      })
    },
    queryRecommendCount (startTime, endTime) {
      return this.$post('/admin/recommend_user_log/success-count-of-date', {
        startTime, endTime
      })
    },
    queryAllRecommendCount (startTime, endTime) {
      return this.$post('/admin/recommend_user_log/count-of-date', {
        startTime, endTime
      })
    }
  }
}
</script>
<style lang="scss">
.todolist {
  padding: 20px 0 10px 0;
}
.todolist-content {
  text-align: center;
}
.todolist .el-row {
  padding-bottom: 15px;
}

.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}
.btn-area {
  padding-right: 100px;
}
.static-tip-txt {
  padding-top: 20px;
}
.c-static {
  display: inline-block;
  padding-top: 10px;
}
.tip-num {
  text-align: center;
  padding-bottom: 15px;
  padding-top: 15px;
  font-size: 18px;
}
.tip-title,
.static-tip-txt {
  white-space: nowrap;
  font-size: 14px;
}
.static-tip-txt {
  color: #999;
}
</style>
